<template>
  <div class="mainStyle">
    <span>搜索面板</span>
    <div class="pt10">
      <el-button :icon="Plus" @click="addRecord">新建</el-button>
      <el-button :icon="Edit" @click="modifyRecord">修改</el-button>
      <el-button :icon="Delete" @click="deleteRecord">删除</el-button>
      <el-button :icon="ChatLineSquare">跟踪汇总</el-button>
    </div>
    <div class="li pt20">
      <div class="liLeft">
        <div class="liLeftTop">
          <div
            ref="leftList"
            class="item"
            v-for="(item, index) in recordList"
            :key="index"
            v-loading="leftLoading"
          >
            <el-checkbox v-model="item.isCheck" size="small" label=""></el-checkbox>
            <div class="liItem">
              <div>
                <el-avatar :icon="UserFilled" size="small" />
                <span>{{ item.staffName }}</span>
                <el-badge
                  :is-dot="!item.isRead"
                  :class="['itemRight', { itemIsRead: item.isRead }]"
                  >{{ item.recordTime }}</el-badge
                >
              </div>
              <div>
                <span :class="{ itemIsRead: item.isRead }">{{ item.userName }}</span>
                <span class="itemRight itemState">{{ item.state }}</span>
              </div>
              <div :class="['sle', { itemIsRead: item.isRead }]">
                {{ item.remark }}
              </div>
            </div>
          </div>
        </div>
        <div class="liLeftBottom">
          <span>共{{ count }}条</span>
          <span @click="loadRecordData">
            <el-icon :size="15">
              <arrow-down />
            </el-icon>
          </span>
        </div>
      </div>
      <div class="liRight"></div>
    </div>
    <record-dialog ref="recordEditDialog" @refershRecord="getRecordData"> </record-dialog>
  </div>
</template>

<script setup lang="ts" name="trackRecordMenu">
import { Edit, Plus, Delete, ChatLineSquare, UserFilled, ArrowDown } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import recordDialog from './components/recordDialog/index.vue'
onMounted(() => {
  handleScorll()
})

// 左侧列表
// 1.改为组件循环
const recordList = reactive([
  {
    recordId: 1,
    staffName: '员工1',
    recordTime: '2023-02-15 08:00',
    userName: '客户1',
    state: '成功签约',
    isRead: true,
    isCheck: false,
    remark:
      '内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息',
  },
  {
    recordId: 2,
    staffName: '员工2',
    recordTime: '2023-02-15 16:00',
    userName: '客户2',
    state: '谈判审核',
    isRead: false,
    isCheck: false,
    remark:
      '内容信息2内容信息2内容信息2内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息',
  },
])
// 2.最多显示10条，滚动条到底端向下翻页
//    数据分页返回，监听滚动事件，滚动到底端时，page++请求数据
const leftList = ref()
const leftLoading = ref(false)
const count = ref(2)
const page = ref(1)
const handleScorll = () => {
  if (leftList.value.scrollTop >= leftList.value.clientHeight - 50) {
    loadRecordData()
  } else {
    console.log('error')
    return false
  }
}
const loadRecordData = () => {
  if (count.value >= page.value * 10) {
    leftLoading.value = true
    page.value = page.value + 1
    getRecordData()
  } else {
    return false
  }
}
const getRecordData = () => {
  console.log('请求数据')
}
// 3.根据数据类型显示不同颜色
//    recordList[i].isRead

// 功能按钮
//  1.新建
const recordEditDialog = ref()
const addRecord = () => {
  recordEditDialog.value.init('add')
}
//  2.修改
const modifyRecord = () => {
  let modifyData = {
    contract: '',
    mode: '',
    objective: '',
    stage: '',
    remark: '111',
  }
  recordEditDialog.value.init('', modifyData)
}
//  3.删除
const deleteRecord = () => {
  let deleteId = []
  recordList.forEach((item) => {
    if (item.isCheck) deleteId.push(item.recordId)
  })
  console.log('删除跟踪记录')
  getRecordData()
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
